<template>
	<div class="bgp">
		<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="66px" class="demo-ruleForm login-container">
			<h3 class="title">微应用管理登录</h3>
			<el-form-item prop="account" label="账号" >
				<el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="请输入账号"></el-input>
			</el-form-item>
			<el-form-item prop="checkPass" label="密码" >
				<el-input type="password" v-model="ruleForm2.password" show-password auto-complete="off" placeholder="请输入密码"></el-input>
			</el-form-item>
		  	<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
			<el-button type="primary"  style="width:200px;margin:5px auto; display: block;" @click="handleSubmit('ruleForm2')">登录</el-button>
		</el-form>
	</div>
</template>
<script>
	import { requestLogin } from '../api/api.js';
	import md5 from 'js-md5';
	export default {
		data() {
			return {
				ruleForm2:{},
				rules2: {
					username: [
						{ required: true, message: '请输入账号', trigger: 'blur' },
						{ min: 2, max: 10, message: '长度在 2 到10 个字符', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
					]
				},
				checked: true,
				loading:false
			};
		},
		
		mounted:function () {
			function getCookie(name){
				var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
				if(arr=document.cookie.match(reg))
				return unescape(arr[2]);
				else
				return null;
			}
			var userToken = getCookie("token");
			if(userToken!= null){
				this.$router.push({ path: '/apply/list'});
			}
		},
		methods: {
			handleSubmit(ruleForm) {
				this.loading = true;
				setTimeout(() => {
					this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						let loginParams ={
							username:this.ruleForm2.username,
							password: md5(this.ruleForm2.password)
						}
						this.loading = false;
						this.msgSuccess();
						document.cookie="token=U8fkn60sN391mNefzx2";
						let user = 'lijiangxin';
						document.cookie="userName="+JSON.stringify(user);
						this.$router.push({ path: '/apply/list'});						
						// requestLogin(loginParams).then((res) => {
						// 	this.loading = false;
						// 	this.msgSuccess();
						// 	if( res.code == 200){
						// 		document.cookie="token="+res.data.token;
						// 		 let user = res.data.user;
						// 		 document.cookie="userName="+JSON.stringify(user);
						// 		this.$router.push({ path: '/apply/list'});
						// 	}else{
						// 	  this.$message({
						// 	  message: '用户名或密码不正确,请重新登录！',
						// 	  type: 'success'
						// 	  });
						// 	};
						// });
					}else{
						console.log('error submit!!');
						return false;
					}
					});					
				}, 1000);

			},
			msgSuccess() {
				this.$message({
					showClose: true,
					message: '登陆成功!',
					type: 'success'
				});
			},
		}
	}

</script>

<style lang="scss" scoped>
	.login-container {
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		background-clip: padding-box;
		margin: 180px auto;
		width: 350px;
		padding: 35px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
		.title {
			margin: 0px auto 40px auto;
			text-align: center;
			color: #505458;
		}
		.remember {
			margin: 0px 0px 35px 0px;
		}
		.loginBtn{
			width: 200px;
			display: block;
			text-align: center;
			margin: 10px auto;
		}
	}
</style>